<template>
  <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%">
    <!-- 管理员 -->
    <el-col>
      <span>{{ treeNode.name }}</span>
    </el-col>
    <!-- 操作选项 -->
    <el-col :span="4">
      <el-row type="flex" justify="end" :gutter="10">
        <el-col>{{ treeNode.manager }}</el-col>
        <el-col>
          <el-dropdown @command="operateDepts">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down" />
            </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <template v-if="!isRoot">
                <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item command="del">删除部门</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartments } from '@/api/departments'
export default {
  props: {
    // 对象数据
    treeNode: {
      type: Object, // 对象类型
      required: true
    },
    // 下拉菜单的操作判定
    isRoot: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    // 下拉菜单删除、编辑、添加部门事件
    async operateDepts(type) {
      if (type === 'edit') {
        // 编辑事件
        this.$emit('editDepts', this.treeNode)
      } else if (type === 'del') {
        // 删除事件
        const mes = await this.$confirm('是否删除当前部门？', { confirmButtonText: '确定',
          cancelButtonText: '取消' }).catch(err => err)
        if (mes === 'confirm') {
          // 点击确定时则发删除请求
          await delDepartments(this.treeNode.id)
          // 通知父组件重新请求组织架构
          this.$emit('delDepts')
          this.$message.success('删除部门成功')
        }
      } else {
        // 添加事件
        this.$emit('addDepts', this.treeNode)
      }
    }
  }
}
</script>

<style>

</style>
